<template>
    <div class="chartPage">
        <div class="title">饼线图-饮品使用率</div>
        <div class="filter">

        </div>
        <div class="main" ref="chart_PieLine"></div>
    </div>
</template>

<script>
    export default {
        name: "chartPieLine",
        components: {},
        props: [],
        data() {
            return {
                option: {
                    legend: {},
                    title:[
                        {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.7)'
                            }
                        }
                    ],
                    tooltip: {
                        trigger: 'axis',
                        showContent: true,
                        textStyle: {
                            color: 'rgba(255, 255, 255, 0.7)'
                        }
                    },
                    // backgroundColor: 'rgba(0, 0, 0, .2)',
                    color: ['#4cabce', '#006fab', '#0018dd', '#e5323e'],
                    dataset: {
                        source: [
                            ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                            ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                            ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                        ],
                    },

                    xAxis: {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff',
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ffffff',
                            }
                        },
                    },
                    yAxis: {
                        gridIndex: 0,
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff',
                            }
                        },
                        axisLabel: {

                            textStyle: {
                                color: '#ffffff'
                            }
                        },
                    },
                    grid: {top: '55%'},
                    series: [
                        {type: 'line', smooth: true, seriesLayoutBy: 'row', color: '#4cabce'},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row', color: '#006fab'},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row', color: '#0018dd'},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row', color: '#e5323e'},
                        {
                            type: 'pie',
                            id: 'pie',
                            radius: '30%',
                            center: ['50%', '25%'],
                            label: {
                                formatter: '{b}: {@2012} ({d}%)'
                            },
                            encode: {
                                itemName: 'product',
                                value: '2012',
                                tooltip: '2012'
                            }
                        }
                    ]
                }
            }
        },
        created() {
        },
        mounted() {
            const _this = this;
            _this.setChartShow();
        },
        methods: {

            setChartShow() {
                const _this = this;
                let option = _this.option;
                // 基于准备好的dom，初始化echarts实例
                let  myChart = _this.$echarts.init( _this.oChartPieLine );
                myChart.showLoading();

                myChart.on('updateAxisPointer', function (event) {
                    let xAxisInfo = event.axesInfo[0];
                    if (xAxisInfo) {
                        let dimension = xAxisInfo.value + 1;
                        myChart.setOption({
                            series: {
                                id: 'pie',
                                label: {
                                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                },
                                encode: {
                                    value: dimension,
                                    tooltip: dimension
                                }
                            }
                        });
                    }
                });

                myChart.setOption( option );
                myChart.hideLoading();

                window.addEventListener('resize', function () {
                    myChart.resize();
                });

            }
        },

        computed: {
            oChartPieLine() {
                return this.$refs.chart_PieLine;
            }
        },
    }
</script>

<style scoped lang="scss">

</style>

